/*
 *@description: 家政服务网站资讯信息
 *@Author:@reynold
 *@Date:2025-03-22 11:08:25
 *@Update:2025-03-22 11:08:25
 *@Version: V1.0.0
*/

<template>
  <Card>
    <div class="information-container">
      <h1 class="page-title">家政服务资讯信息</h1>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="资讯标题">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="publishTime"
          label="发布时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageQuery.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 详情对话框 -->
      <el-dialog
        title="资讯详情"
        :visible.sync="dialogVisible">
        <div class="detail-content">
          <h2>{{ currentInfo.title }}</h2>
          <p>作者: {{ currentInfo.author }}</p>
          <p>发布时间: {{ currentInfo.publishTime }}</p>
          <p>{{ currentInfo.content }}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          title: "如何正确清洁大理石地板",
          author: "清洁小能手",
          publishTime: "2025-04-01 10:00:00",
          content: "大理石地板美观大方，但清洁时需要注意方法，本文将为您详细介绍如何正确清洁大理石地板，避免损伤。"
        },
        {
          id: 2,
          title: "家电深度清洁的重要性",
          author: "家电保养专家",
          publishTime: "2025-03-25 14:30:00",
          content: "家电使用一段时间后，内部会积累大量灰尘和污垢，不仅影响使用寿命，还可能危害健康。了解家电深度清洁的重要性和方法。"
        },
        {
          id: 3,
          title: "家庭厨房油污清理小窍门",
          author: "厨房清洁达人",
          publishTime: "2025-03-18 09:15:00",
          content: "厨房油污难以清理？别担心，这里有一些实用的小窍门，让您轻松去除厨房油污，让厨房焕然一新。"
        },
        {
          id: 4,
          title: "选择靠谱家政服务人员的要点",
          author: "家政服务顾问",
          publishTime: "2025-03-10 16:20:00",
          content: "选择合适的家政服务人员是关键，本文将从人员资质、服务经验、口碑评价等方面为您介绍选择靠谱家政服务人员的要点。"
        },
        {
          id: 5,
          title: "窗帘清洗的注意事项",
          author: "家居清洁师",
          publishTime: "2025-02-28 11:45:00",
          content: "窗帘使用久了会积尘，需要定期清洗。但不同材质的窗帘清洗方法不同，本文将为您介绍窗帘清洗的注意事项。"
        },
        {
          id: 6,
          title: "冬季地毯保养的有效方法",
          author: "地毯护理专家",
          publishTime: "2025-02-20 15:00:00",
          content: "冬季地毯容易变脏，且容易出现静电等问题。了解冬季地毯保养的有效方法，让地毯保持干净整洁。"
        },
        {
          id: 7,
          title: "卫生间异味去除的妙招",
          author: "卫生间清洁大师",
          publishTime: "2025-02-12 08:30:00",
          content: "卫生间异味让人烦恼？这里有一些简单有效的异味去除妙招，让您的卫生间空气清新。"
        },
        {
          id: 8,
          title: "沙发清洁与保养的技巧",
          author: "家具保养专员",
          publishTime: "2025-01-30 13:10:00",
          content: "沙发是家居生活中重要的家具，定期清洁和保养可以延长其使用寿命。本文将为您介绍沙发清洁与保养的技巧。"
        },
        {
          id: 9,
          title: "玻璃清洁的正确步骤",
          author: "玻璃清洁专家",
          publishTime: "2025-01-20 17:45:00",
          content: "玻璃清洁看似简单，但要做到干净透亮并不容易。了解玻璃清洁的正确步骤，让您的玻璃窗户、镜子等光洁如新。"
        },
        {
          id: 10,
          title: "如何整理衣柜更高效",
          author: "收纳达人",
          publishTime: "2025-01-10 10:50:00",
          content: "衣柜杂乱无章？别着急，这里有一些高效整理衣柜的方法，让您的衣物摆放整齐，方便查找。"
        }
      ],
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      total: 10, // 因为添加了10条数据，这里先设为10，实际可根据后端返回数据调整
      dialogVisible: false,
      currentInfo: {}
    }
  },
  methods: {
    // 获取数据
    getData() {
      instance.post('/inforMsg/list', this.pageQuery).then(res => {
        if (res.data && res.data.list && res.data.list.length > 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      }).catch(error => {
        console.error('获取资讯数据失败:', error);
      });
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageQuery.pageSize = val;
      this.getData();
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val;
      this.getData();
    },
    // 查看详情
    viewDetails(info) {
      this.currentInfo = info;
      this.dialogVisible = true;
    }
  },
  created() {
    this.getData();
  },
  components: {
    Card
  }
}
</script>

<style lang="less" scoped>
.information-container {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.detail-content {
  padding: 20px;
}
</style>    